<template>
  <div class="limit_setting">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>部门配置
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(0)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>刷新
          </el-button>
        </div>
      </div>
    </div>
    <div class="body_container">
      <div class="body_left">
        <button @click="addChange" :class="isAdd?'cancel':''">{{isAdd?'取消添加':'添加子部门'}}</button>
        <button @click="del">删除选中部门</button>
        <el-input
          placeholder="输入关键字进行筛选"
          v-model="filterText"
          style="width:216px;margin:10px auto;"
        ></el-input>
        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          :filter-node-method="filterNode"
          :highlight-current="true"
          :check-on-click-node="true"
          ref="tree2"
          default-expand-all
          @node-click="setCurrent"
        ></el-tree>
      </div>
      <div class="body_right">
        <div class="right_header">
          <p>{{isAdd?'添加子部门':'部门设置'}}</p>
          <button @click="add">{{isAdd?'确认添加':'保存设置'}}</button>
        </div>
        <div class="right_body">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
            :inline="true"
            style="text-align:left;"
          >
            <el-form-item label="父级节点：" label-width="100px">
              <el-input v-model="form.parent" :disabled="true" style="width:240px;"></el-input>
              <el-input v-show="false" v-model="form.parentId" :disabled="true" style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="部门名称：" label-width="100px">
              <el-input v-model="form.orgName" style="width:240px;"></el-input>
            </el-form-item>
            <el-form-item label="机构等级：" label-width="100px">
              <el-select v-model="form.orgLevel" placeholder="请选择" style="width:240px;">
                <el-option v-for="(item,index) in levels" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机构类型：" label-width="100px">
              <el-select v-model="form.orgType" placeholder="请选择" style="width:240px;">
                <el-option v-for="(item,index) in types" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="外部类型：" label-width="100px" v-show="form.orgType == 9">
              <el-select v-model="form.outType" placeholder="请选择" style="width:240px;">
                <el-option v-for="(item,index) in outTypes" :key="index" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="序号：" label-width="100px">
              <el-input v-model="form.sortIndex" style="width:240px;"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "orgSetting",
  data() {
    return {
      // 搜索框的值
      filterText: "",
      defaultProps: {
        children: "list",
        label: "orgName"
      },
      // 添加/编辑
      isAdd: false,
      // 当前选中项的节点和数据
      currentNode: {},
      currentData: {},
      // 树状图的数据
      data: [],
      // 表单的数据
      form: {
        orgName:"",//部门名称
        orgLevel:'',//部门等级
        orgType:'',//部门类型
        outType:'',//外部类型
        parent: "",//父级名称
        parentId:'',//上级部门id
        sortIndex:"",//排序
        list: [],
      },
      orgIds:'',
      editInfo:{},
      levels:[{name:'虚拟节点',id:'0'},{name:'实际组织',id:'1'}],
      types:[{name:'公司',id:'0'},{name:'项目部',id:'1'},{name:'子公司',id:'2'},{name:'部门',id:'3'},{name:'外部组织',id:'9'}],
      outTypes:[{name:'甲方公司',id:'0'},{name:'施工队',id:'1'},{name:'挂靠公司',id:'2'},{name:'监理单位',id:'3'},{name:'设计院',id:'4'},{name:'材料供应商',id:'5'},{name:'分包公司',id:'6'},{name:'施工单位',id:'7'}]
    };
  },
  mounted() {
      this.dataInit();
  },
  methods: {
    //数据列表
    dataInit(){
      let that = this;
      let suCb = function(res){
        that.data = res.data.data.orgList;
        console.log(res.data.data.orgList)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
      }
      let palyParam = {
        url: "/api/web/sysOrg/getAllDepartment",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    // children 属性为空时必须为[]不然会报错
    // 点击添加子部门按钮 切换isAdd的状态 把当前选中项的data和node传入setCurrent重置
    addChange() {
      this.isAdd = !this.isAdd;
      // if(this.isAdd == true ){
//      this.setCurrent(this.currentData, this.currentNode);
      if(this.isAdd == false && JSON.stringify(this.currentData)=='{}'){
        console.log(1)
        return false
      }else{
        console.log(this.currentData)
        this.setCurrent(this.currentData, this.currentNode);
      }
      // }
    },
    //  获取当前选中项的data和node 并赋值给form中的子项，然后将form.children重置为空数组
    setCurrent(data, node) {
      this.currentData = data;
      this.currentNode = node;
      console.log(this.currentData)
      // 如果是添加 则父节点为当前选中的节点 其他为空 让用户输入
      if (this.isAdd) {
          console.log("添加")
        console.log(data)
        console.log(node)
        this.form.parent = data.orgName;
        this.form.parentId = data.orgId;
        this.form.orgName = "";
        this.form.orgLevel = "";
        this.form.orgType = "";
        this.form.outType = "";
        this.form.sortIndex = "";
        this.form.list = [];
      } else {
        console.log(data);
        console.log(node);
        // 如果是编辑 则父节点为当前节点的parent.data.label 其他信息自动填充 然后children为空数组
        this.form.parent =
          node.parent.data.orgName == undefined
            ? "无父节点"
            : node.parent.data.orgName;
        this.form.parentId = node.parent.data.orgId;
        this.form.orgName = data.orgName;
        this.form.orgLevel = data.orgLevel;
        this.form.orgType = data.orgType;
        this.form.outType = data.outType;
        this.form.sortIndex = data.sortIndex;
        this.form.list = [];
        this.editInfo=data;
      }
      console.log(this.form,"编辑");
    },
    // 搜索框 过滤函数
    filterNode(value, data) {
      if (!value) return true;
      return data.orgName.indexOf(value) !== -1;
    },
    addFn(val){
      let that = this;
      let suCb = function(res){
        console.log(res)
        that.$message({
          message: '添加成功',
          type: 'success'
        });
        that.dataInit();
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        orgName:val.orgName,
        orgLevel:val.orgLevel,
        orgType:val.orgType,
        outType:val.outType,
        parentId:val.parentId,
        sortIndex:parseInt(val.sortIndex)
      }
      let palyParam = {
        url: "/api/web/sysOrg/addSysOrg",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    add() {
      // 先判断form.label不能为空
      if (this.form.orgName == "") {
        alert("部门名称不能为空");
      } else {
        // 如果是添加 就利用JSON序列化反序列化深拷贝form并赋值给newChild 然后push进当前数据中的children数组
        if (this.isAdd) {
          let newChild = JSON.parse(JSON.stringify(this.form));
          this.currentData.list.push(newChild);
          console.log(this.form);
          this.addFn(this.form,"添加1");
          console.log(this.form)
        } else {
          // 如果是编辑 则将改变的数据赋值给当前选中项的data 然后清空form 初始化父节点的显示框
          this.currentData.orgName = this.form.orgName;
          this.currentData.orgLevel = this.form.orgLevel;
          this.currentData.orgType = this.form.orgType;
          this.currentData.outType = this.form.outType;
          this.currentData.sortIndex = this.form.sortIndex;
          this.editFn(this.editInfo);
          console.log(this.form,"编辑成功")
        }
        this.form = {
          orgName:"",//部门名称
          orgLevel:'',//部门等级
          orgType:'',//部门类型
          outType:'',//外部类型
          parent: "",//父级名称
          parentId:'',//上级部门id
          sortIndex:"",//排序
          list: [],
        };
        this.isAdd = false;
//        this.form.parent = this.currentNode.data.orgName;

        console.log(this.form)
  }
    },
    delfn(val){
      let that = this;
      let suCb = function(res){
        that.$message({
          message: '删除成功',
          type: 'success'
        });
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        orgId:val
      }
      let palyParam = {
        url: "/api/web/sysOrg/remove",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    editFn(data){
      let that = this;
      let suCb = function(res){
        that.$message({
          message: '编辑成功',
          type: 'success'
        });
        that.dataInit();
        console.log(res.data)
      }
      let erCb = function(res){
        console.log(res)
      }
      let postData = {
        orgId:data.orgId,
        orgName:data.orgName,
        orgLevel:data.orgLevel,
        orgType:data.orgType,
        outType:data.outType,
        sortIndex:parseInt(data.sortIndex)
      }
      let palyParam = {
        url: "/api/web/sysOrg/setSysOrg",
        methods:'post',
        data: postData,
        success: suCb,
        error: erCb,
      }
      that.$https(palyParam)
    },
    del() {
        console.log(this.currentNode);
      console.log(this.currentNode.data.orgId);
      console.log(this.currentData)
//      return false;
      // 找到父节点 没有父节点则为当前节点 然后找寻对应下标 用splice从当前数组中删除
      const parent = this.currentNode.parent;
      console.log(parent);

      const children = parent.data.list || parent.data;
      const index = children.findIndex(d => d.orgName === this.currentData.orgName);
      console.log(index)
      children.splice(index, 1);
      this.delfn(this.currentData.orgId);
//      console.log(this.currentNode.data.orgId);
      this.form = {
        orgName:"",//部门名称
        orgLevel:'',//部门等级
        orgType:'',//部门类型
        outType:'',//外部类型
        parent: "",//父级名称
        parentId:'',//上级部门id
        list: [],
      };
      this.isAdd = false;
    }
  },
  watch: {
    // 侦听 当前搜索框的值
    filterText(val) {
      this.$refs.tree2.filter(val);
    }
  }
};
</script>

<style scoped>
.body_container {
  width: 1100px;
  margin: 30px auto;
  display: flex;
  justify-content: space-between;
}

.body_left {
  width: 300px;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  min-height: 800px;
  padding: 10px;
  box-sizing: border-box;
}

.body_right {
  width: 780px;
  min-height: 800px;
  border: 1px solid rgba(228, 228, 228, 1);
}

.body_right .right_header {
  border-bottom: 1px solid rgba(228, 228, 228, 1);
  height: 45px;
  line-height: 45px;
  display: flex;
  justify-content: space-between;
  background-color: #f3f3f3;
}

.body_right .right_header p {
  font-size: 14px;
  margin-left: 15px;
  color: #666;
}

.body_right .right_body {
  padding: 20px 30px;
}

.body_container button {
  height: 35px;
  line-height: 35px;
  border: 1px solid #eee;
  border-radius: 2px;
  background-color: #fff;
  font-size: 14px;
  color: #666;
  width: 100px;
  margin: 5px;
}

.body_container button:hover,
.body_container button.cancel {
  color: #fff;
  background-color: #1abc9c;
}
</style>

